<template>
  <div class="login">
    <div>

      <div class="box">
        <div class="loginimg">
          <h1>学知网后台管理系统</h1>
        </div>
        <el-form class="form" ref="ruleFormRef" :model="ruleForm" :rules="rules">
          <el-form-item prop="username" >
              <el-input v-model="ruleForm.username" maxlength="50" placeholder="输入用户名">
                <template #prepend><el-icon><User /></el-icon></template>
              </el-input>
          </el-form-item>
          <el-form-item style=" margin-top: 20px;" prop="password">
            <el-input v-model="ruleForm.password" placeholder="输入密码">
                <template #prepend><el-icon><Lock /></el-icon></template>
              </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 400px; height: 40px;"
              @click="submitForm(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
        <h4 style="color: #ccc; margin-left: 43px;">用户名: admin &nbsp;&nbsp;&nbsp; 密码: 123456</h4>
      </div>
      
    </div>
    
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { useRouter } from "vue-router";
import { useLoginStore } from "@/stores/login";
import { checkPass } from "../assets/js/utils";
import axios from "../assets/js/axios";

const loginStore = useLoginStore();
const router = useRouter();

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: "",
  password: "",
});

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
    {
      min: 2,
      max: 20,
      message: "用户名需要在2到20的长度",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      validator: checkPass,
      trigger: "blur",
    },
  ],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    console.log(formEl);
    return;
  }
  await formEl.validate((valid, fields) => {
    console.log("yes");
    if (valid) {
      axios.post("/serviceedu/edu-user/login", ruleForm).
        then((res: any) => {
          if (res.code === 200) {
            loginStore.changeUserInfo(ruleForm);
            localStorage.setItem("userInfo", JSON.stringify(ruleForm));
            router.push("/");
          } else {
            ElMessage({
              type: "error",
              message: res.msg
            })
          }
        })
    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>

<style scoped lang="less">
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #eef0f3;

  .box {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: white;
    border-radius: 8px;
    transform: translate(-50%, -50%);
   
    height: 440px;
    overflow: hidden;
    box-shadow: 0 6px 20px 5px #9898981a, 0 16px 24px 2px #75757524;

    h1 {
      margin-top: 80px;
      text-align: center
    }
  }
  
  .form {
   
      width: 80%;
      margin: 50px auto 15px;
      .el-input {
        margin-bottom: 20px;
      }
      .password-icon {
        cursor: pointer;
        color: #409eff;
      }
    }
    .fixed-top-right {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
  

  .el-form {
    :deep .el-input__wrapper {
    
      height: 40px;
      border-bottom: 1px solid #cccccc;

    }

    :deep .el-form-item__error {
      left: 70px;
    }
  
}
</style>